<template>
	<view>
		<view class="u-rela">
			<view v-show="swiperAction === 0">
				<u-swiper height="80vw" radius="0" :list="banner" :autoplay="true" @click="bannclick"></u-swiper>
			</view>
			<view v-show="swiperAction === 1">
				<u-swiper height="80vw" radius="0" :list="videos" :autoplay="false"></u-swiper>
			</view>
			<view class="swiperAction-box">
				<view @click="swiperAction = index" class="swiperAction" :class="index === swiperAction ? 'sction' : ''"
					v-for="(item, index) in swiperList" :key="index">{{ item }}</view>
			</view>
		</view>
		<home :bgColors="bgColors"></home>
		<view class="m-bg-w u-p-30">
			<view class="u-flex u-flex-between">
				<view class="u-font-40 m-font-b">{{ room.name }}</view>
				<view class="boxlv u-rela" @click="isMini() ? getfen() : ''">
					<view>分享推荐</view>
					<!-- #ifndef APP-PLUS -->
					<button open-type="share" class="share-btn"></button>
					<!-- #endif -->
				</view>
			</view>
			<view class="u-flex u-m-t-20">
				<view class="xu-list">{{ room.buildingtype }}</view>
				<view class="u-m-l-20 u-flex m-font-b m-c-g u-font-28">
					<text>售价{{ room.aveprice }}元/m</text>
					<text class="m-pf">2</text>
					<text>-{{ room.avepricemax }}元/m</text>
					<text class="m-pf">2</text>
				</view>
			</view>
			<view class="u-flex u-flex-between u-flex-items-center u-m-t-20">
				<view class="u-flex">
					<u--image :src="oss + '/room/room.png'" width="15" height="15"></u--image>
					<view class="u-flex u-m-l-10 u-font-24 m-c-h1">
						<text>户型面积：{{ room.rooms }}m</text>
						<text class="m-pf">2</text>
						<text>-{{ room.roomsmax }}m</text>
						<text class="m-pf">2</text>
					</view>
				</view>
				<view @click="getda">
					<u--text suffixIcon="arrow-right" size="14" color="#f36404"
						iconStyle="font-weight:bold; color: #f36404" text="购房优惠"></u--text>
				</view>
			</view>
			<view class="u-flex u-flex-y-center mbgf u-p-10 u-m-t-30" @click="getda">
				<view class="boxbgf">更多补贴信息</view>
				<view class="u-m-l-30 corb u-font-24">{{ room.commissiontext }}</view>
			</view>
		</view>

		<!-- <u-sticky :zIndex="show === 1 ? 0 : 1" v-if="show === 0" :offsetTop="topmax + 'px'">
			<view class="m-b-s m-bg-w u-m-b-20">
				
			</view>
		</u-sticky> -->
		<view class="showTop" :style="{ position: showTop ? 'fixed' : 'inherit', top: topmax + 'px' }">
			<u-tabs :list="list4" @click="getclick" v-model="current" :activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" lineColor="#0E5642" :lineWidth="30" :lineHeight="2" :scrollable="false">
			</u-tabs>
		</view>
		<view class="m-bg-w u-p-30 u-m-t-20">
			<view class="top-1">
				<view class="u-flex u-flex-items-center">
					<view class="shuxian"></view>
					<view class="shuxian-text">楼盘详情</view>
				</view>
				<view v-if="datadongtai.length">
					<view class="u-flex u-flex-wrap">
						<view class="u-flex w_50 u-m-t-20" v-for="(item, index) in datadongtai" :key="index">
							<view class="c2">{{ item.name }}</view>
							<view class="c1 u-m-l-20 u-line-1">{{ item.name1 }}</view>
						</view>
					</view>
					<view class="u-flex u-m-t-20" v-for="(item, index) in datadongtai1" :key="index">
						<view class="c2">{{ item.name }}</view>
						<view class="c1 u-line-1 u-m-l-20">{{ item.name1 }}</view>
					</view>
				</view>
				<list-empty v-else text="暂时没有数据哟!" list="data" :listHighly="150"></list-empty>
			</view>

			<view class="top-2 u-m-t-30">
				<view class="u-flex u-flex-items-center u-m-b-20">
					<view class="shuxian"></view>
					<view class="shuxian-text">户型介绍</view>
				</view>
				<recommendation :code="room.housetype" v-if="room.housetype.length"></recommendation>
				<list-empty v-else text="暂时没有户型介绍哟!" list="data" :listHighly="150"></list-empty>
			</view>

			<view class="top-3 u-p-b-20">
				<view class="u-flex u-flex-items-center u-m-b-20">
					<view class="shuxian"></view>
					<view class="shuxian-text">楼盘周边</view>
				</view>
				<map id="map" style="width: 100%; height:215px;position: relative;" :latitude="room.lat"
					:longitude="room.lon" @tap="toMap(room.lat, room.lon)" :enable-scroll="true" :enable-zoom="true"
					:show-location="true">
					<cover-view slot="callout">
						<cover-view :marker-id="room.id" class="m-flex-y u-flex-items-center">
							<cover-view class="u-flex m-marker-box u-flex-1">
								<cover-view class="u-p-r-20 borright">
									<cover-view>{{ room.name }}</cover-view>
									<cover-view class="u-font-20 m-c-h u-m-t-10 m-line-1">{{ room.address }}
									</cover-view>
								</cover-view>
								<cover-view class="m-flex-y u-flex-items-center u-m-l-20 m-flex-no">
									<cover-image src="/static/map/1.png" class="widhei"></cover-image>
									<cover-view class="m-c-g u-font-20">路线导航</cover-view>
								</cover-view>
							</cover-view>
							<cover-view class="daosanjiao"></cover-view>
						</cover-view>
					</cover-view>
					<!-- <cover-image class="map-dingwei" :src="oss + '/df/dingwei.png'" @click="moveToLocation"></cover-image> -->
				</map>
				<!-- <u-gap></u-gap> -->
				<view class="u-m-20 u-m-b-0" v-for="(item, index) in listData" :key="item.name"
					v-if="item.nickname != '无'">
					<view class="u-flex">
						<u--image :showLoading="false" :src="item.src" width="32rpx" height="32rpx"></u--image>
						<view class="u-m-l-15 m-font-b u-font-26">
							<text>{{ item.name }}</text>
						</view>
					</view>
					<view class="pt-info">{{ item.nickname }}</view>
				</view>
			</view>

			<view class="top-4 u-p-b-30">
				<view class="u-flex u-flex-items-center u-m-b-20">
					<view class="shuxian"></view>
					<view class="shuxian-text">品牌介绍</view>
				</view>
				<view class="u-flex" v-if="room.developers">
					<u--image :src="room.developers.image || df" width="110" height="90"></u--image>
					<view class="u-m-l-20 m-flex-y u-flex-between">
						<view>
							<view class="m-font-b u-font-28">{{ room.developers.name }}</view>
						</view>
						<view class="u-font-24 m-c-h" style="font-weight: normal;">
							<u-parse :content="room.developers.content"></u-parse>
						</view>
					</view>
				</view>
				<list-empty v-else text="暂时没有品牌介绍哟!" list="data" :listHighly="150"></list-empty>
			</view>

			<view class="top-5">
				<view class="u-flex u-flex-items-center u-m-b-20">
					<view class="shuxian"></view>
					<view class="shuxian-text">楼盘点评</view>
				</view>
				<view class="u-p-b-10" v-if="datalun.length > 0">
					<view class="u-flex u-flex-between u-p-t-20 u-p-b-20" style="border-bottom: 1rpx solid #dadbde;"
						v-for="(item, index) in datalun" :key="index">
						<view class="u-flex u-flex-items-center">
							<u-avatar shape="circle" size="50" :src="item.avatar || df"></u-avatar>
							<view class="u-m-l-20">
								<view class="u-flex">
									<view class="ca0 u-font-18">{{ item.nickname || '昵称0' + (index + 1) }}</view>
									<view class="ca0 u-m-l-20 u-font-16">
										{{ $u.timeFormat(item.createtime, 'yyyy-mm-dd') }}</view>
								</view>
								<view class="c63 u-line-1 u-m-t-20">{{ item.content }}</view>
							</view>
						</view>
						<view class="u-flex u-flex-items-start">
							<!-- <u-icon name="xiaoxi" customPrefix="master" color="#acacac" size="18"></u-icon> -->
							<!-- <u-icon name="thumb-up" color="#acacac" size="18" @click="gozan(item.id,item.iszan)"></u-icon> -->
						</view>
					</view>
				</view>
				<list-empty v-else text="暂时没有点评数据哟!" list="data" :listHighly="150"></list-empty>
			</view>
		</view>
		<view class="m-mg-4w u-m-t-30">
			<view class="u-flex u-flex-items-center u-m-b-20">
				<view class="shuxian"></view>
				<view class="shuxian-text">浏览记录</view>
			</view>
			<browselist :list="liulandata" v-if="liulandata.length"></browselist>
			<list-empty v-else text="暂时没有数据哟!" list="data" :listHighly="150"></list-empty>
		</view>
		<view class="u-p-30" v-if="shenming">
			<u--text prefixIcon="info-circle" :bold="true"
				iconStyle="font-size: 18px;margin-right: 10rpx;font-weight: bold" text="免责声明"></u--text>
			<view class="m-c-h u-font-20 u-m-t-20">{{ shenming }}</view>
		</view>
		<view :style="{ height: 65 + sys.bottom + 'px' }"></view>
		<view class="boxfiexd">
			<nav-b :list="navList" :btList="navbtList" @getg="getg" @getda="getda" :idd="room.id" :rooms="room"
				:phone="phone" @getchong="getchong"></nav-b>
			<view class="m-bg-w" :style="{ height: sys.bottom + 'px' }"></view>
		</view>
		<u-loading-page loading-text="内当家APP" :loading="pageLoad"></u-loading-page>
		<obtain :show="obtain" @showchange="obtain = false"></obtain>
	</view>
</template>

<script>
	import QQMapWX from '@/common/qqmap-wx-jssdk.js';
	let qqmapsdk = new QQMapWX({
		key: 'VDPBZ-Z7A3K-7Z7JG-A6KLA-WIZJH-7QBTD'
	});
	export default {
		data() {
			return {
				shenming: uni.getStorageSync('shenming') || '',
				videos: [],
				swiperList: ['图片'],
				swiperAction: 0,
				topArr: [],
				showTop: false,
				yin: true,
				length: 0,
				show: 0,
				src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%205%403x.png',
				src1: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E7%9F%A9%E5%BD%A2%20580%20%E6%8B%B7%E8%B4%9D%203%403x.png',
				activeStyle: {
					color: '#0e5642',
					transform: 'scale(1.05)',
					fontSize: '26rpx'
				},
				inactiveStyle: {
					color: '#606266',
					fontSize: '26rpx'
				},
				listData: [{
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%403x.png',
						name: '交通配套',
						nickname: '交通旁边有203、86、91号公交车经过。公交站点'
					},
					{
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%403x.png',
						name: '教育配套',
						nickname: '幼儿园博学幼儿园，新太阳幼儿园；中小学北大学园，长安中学，新风中学'
					},
					// {
					// 	src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%202%403x.png',
					// 	name: '商业配套',
					// 	nickname: '万科长安中心、长安万达购物广场、万润商场、天和百货、嘉佳超市'
					// },
					{
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%203%403x.png',
						name: '医疗配套',
						nickname: '大岭山医院、长安医院'
					}
					// {
					// 	src: 'https://neidangjia.oss-accelerate.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%204%403x.png',
					// 	name: '银行配套',
					// 	nickname: '中国银行、东莞农村商业银行、中国建设银行、中国工商银行。'
					// }
				],
				room: {
					housetype: [],
					characteristic: []
				},
				crt: 0,
				imageone: '',
				commissiontext: '',
				rooms: '',
				roomsmax: '',
				navList: [{
						icon: 'duibi',
						size: 18,
						text: '对比',
						color: ''
					},
					{
						icon: 'shoucang',
						size: 18,
						text: '收藏',
						color: ''
					},
					{
						icon: 'hujiao',
						size: 18,
						text: '电话',
						color: ''
					}
				],
				navbtList: [{
						bgColor: '#0e5642',
						color: '#fff',
						br: 10,
						mg: 10,
						text: '管家'
					},
					{
						bgColor: '#0e5642',
						color: '#fff',
						br: 10,
						mg: 10,
						text: '预约看房'
					}
				],
				value6: 0,
				val: '',
				type: 'emoji',
				chat_view_id: 0,
				long_chat_show: false,
				long_click_index: 0,
				list_sheet: [],
				loading_show_status: false,
				loading_img: 'https://oss.wtzjz.cn/shop/392/202106/bcc829e54056e554fc3c6e01763c0e32.gif',
				reply: {},
				reply_view_status: false,
				listOne: [{
						id: 1,
						label: '200万以下'
					},
					{
						id: 2,
						label: '300-400万以下'
					},
					{
						id: 3,
						label: '400-500万以下'
					},
					{
						id: 4,
						label: '500-600万以下'
					}
				],
				count: 5,
				value: 1,
				text1: '全网最优惠',
				activeIndex: 0,
				list4: [{
						name: '详情'
					},
					{
						name: '户型'
					},
					{
						name: '周边'
					},
					{
						name: '品牌'
					},
					{
						name: '点评'
					}
				],
				current: 0,
				datalun: [],
				p: 1,
				listStatua: 'nomore',
				id: null,
				tuoguan: '',
				tuiData: [],
				datadongtai: [],
				datadongtai1: [],
				banner: [],
				liulandata: [],
				topmax: null,
				bgColors: 'transparent',
				phone: '',
				zan: false
			};
		},
		onPageScroll(e) {
			if (e.scrollTop < 10) {
				this.bgColors = 'transparent';
			} else {
				this.bgColors = '#fff';
				for (var i = 0; i < this.topArr.length; i++) {
					if (e.scrollTop > this.topArr[i]) {
						this.showTop = true;
						this.current = i;
					}
				}
				if (e.scrollTop < this.topArr[0]) {
					this.showTop = false;
				}
			}
		},
		async onLoad(e) {
			this.pageLoad = false;
			let sys = uni.$u.sys();
			// #ifdef MP-WEIXIN
			this.topmax = +sys.statusBarHeight + 44;
			// #endif
			if (e && e.id) {
				this.id = +e.id;
				await this.details(e.id);
				await this.getlun(e.id);
				await this.require('addcollection', {
					id: e.id
				});
				// this.path = 'propertiestuijian';
				// this.params = {
				// 	...this.params,
				// 	pnum: this.pnum
				// };
				// await this.getList();
				// this.tuiData = [...this.dataList.lvyou, ...this.dataList.touzi];
				// let res = await this.require('getcompanyconfig');
				// if (res) {
				// 	this.tuoguan = res[0].title + res[0].value;
				// }
				setTimeout(() => {
					for (var i = 0; i < 5; i++) {
						let that = this;
						let element = '.top-' + (i + 1);
						const query = uni.createSelectorQuery();
						query.select(element).boundingClientRect();
						query.selectViewport().scrollOffset();
						query.exec(function(res) {
							if (res[0]) {
								that.topArr.push(res[0].top - that.topmax - 88);
							}
						});
					}
				}, 1000);
				let rdata = await this.require('getprocollectionlist', {
					p: 1,
					pnum: 20
				});
				if (rdata) {
					this.liulandata = rdata;
				}
				let res5 = await this.require('getcompanyconfig');
				if (res5) {
					res5.map((p, i) => {
						if (p.title == '客服电话') {
							this.phone = p.value;
						}
					});
				}
			} else {
				this.nextNav('back');
			}
			// setTimeout(() => {
			// 	this.pageLoad = false;
			// }, 1000);
		},
		async onPullDownRefresh() {
			// 下拉刷新
			this.p = 1;
			await this.getlun();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			// 上拉加载
			if (this.listStatua === 'nomore') {
				return;
			}
			this.p++;
			this.listStatua = 'loading';
			this.getlun('add');
		},
		onShareAppMessage(res) {
			this.require('setzfnum', {
				id: this.id
			});
		},
		methods: {
			async gozan(id, iszan) {
				let res = await this.require('zancomment', {
					id,
					type: iszan
				})
				if (res) {
					this.getlun(this.id);
				}
			},
			moveToLocation() {
				this.map.moveToLocation({
					latitude: this.room.lat,
					longitude: this.room.lon
				});
			},
			bannclick(e) {
				// 预览图片
				uni.previewImage({
					urls: this.banner,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			async getlun(id, add) {
				let res = await this.require('getcommentlist', {
					id: +id,
					p: this.p,
					pnum: 10
				});
				if (res) {
					if (add === 'add') {
						this.datalun = this.datalun.concat(res);
					} else {
						this.datalun = res;
					}
					this.listStatua = res.length === 10 ? 'loadmore' : 'nomore';
				} else {
					this.datalun = [];
					this.listStatua = 'nomore';
				}
			},
			getg(e) {
				this.show = e;
			},
			async getchong(id) {
				await this.details(id);
			},
			async getfen() {
				if (!(await this.getMobile())) {
					return;
				}
			},
			getda() {
				uni.setStorageSync('room', JSON.stringify(this.room));
				this.nextNav('/pages/room/proojectdetails');
			},
			getclick(e) {
				let top = e.index === 0 ? this.topArr[e.index] - 25 : this.topArr[e.index];
				this.current = e.index;
				this.bgColors = '#fff';
				this.showTop = true;
				uni.pageScrollTo({
					scrollTop: top
				});
			},
			async details(id) {
				let res = await this.require('getproperties', {
					id
				});
				if (res) {
					this.length = res.propertiesnews.length;
					res.images = res.images ? res.images.split(',') : [];
					res.video_file = res.video_file ? res.video_file.split(',') : [];
					this.room = res;

					// this.listData[0].nickname = this.room.bus ? this.room.bus : '无';
					// this.listData[1].nickname = this.room.study ? this.room.study : '无';
					// this.listData[2].nickname = this.room.hospital ? this.room.hospital : '无';
					let location = res.lat + ',' + res.lon;
					await this.getZhou(location);

					this.navList[1].text = res.isShouchang == 1 ? '已收藏' : '收藏';
					if (res.images) {
						this.banner = this.room.images;
					}
					if (res.video_file.length) {
						this.videos = res.video_file;
						this.swiperList = this.swiperList.concat('视频');
					}
					let name1 = '';
					for (var i = 0; i < res.characteristic.length; i++) {
						name1 += res.characteristic[i].name;
					}
					this.datadongtai = [
						// {
						// 	name: '楼盘别名',
						// 	name1: res.name || ''
						// },

						// {
						// 	name: '参考单价',
						// 	name1: res.aveprice ? this.get_look_two(res.aveprice) + '-' + this.get_look_two(res
						// 		.avepricemax) : ''
						// },
						{
							name: '参考总价:',
							name1: res.price ? res.price + '万-' + res.pricemax + '万' : ''
						},
						{
							name: '产权年限:',
							name1: res.years ? res.years + '年' : ''
						},
						{
							name: '物业类型:',
							name1: res.companytype || ''
						},
						{
							name: '建筑类型:',
							name1: res.buildingtype || ''
						},
						{
							name: '楼盘特色:',
							name1: name1 || ''
						}
					];
					this.datadongtai1 = [{
							name: '开发商:',
							name1: res.developers.name || ''
						},
						{
							name: '所在地区:',
							name1: res.areaname ? res.province + '-' + res.city + '-' + res.areaname : ''
						},
						{
							name: '楼盘地址:',
							name1: res.address || ''
						}
					];
					let covers = [{
						id: +this.room.id,
						latitude: +this.room.lat,
						longitude: +this.room.lon,
						iconPath: '/static/map/2.png',
						alpha: 0.8,
						width: 20,
						height: 25
					}];
					// #ifdef APP-PLUS
					covers[0].customCallout = {
						anchorX: 0,
						anchorY: 0,
						display: 'ALWAYS'
					};
					// #endif
					// #ifndef APP-PLUS
					covers[0].callout = {
						content: `${this.room.name}\n${this.room.address}`,
						color: '#acacac',
						fontSize: 10,
						borderRadius: 4,
						bgColor: '#fff',
						padding: 5,
						display: 'ALWAYS',
						textAlign: 'center'
					};
					// #endif
					this.map = uni.createMapContext('map', this);
					this.map.addMarkers({
						markers: covers,
						clear: true
					});
				}
			},
			async getZhou(location) {
				this.listData = [{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%403x.png',
						name: '交通配套',
						nickname: await this.zhou('基础设施:交通设施', location)
					},
					{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%403x.png',
						name: '教育配套',
						nickname: await this.zhou('教育学校', location)
					},
					{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%202%403x.png',
						name: '商业配套',
						nickname: await this.zhou('购物', location)
					},
					{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%203%403x.png',
						name: '医疗配套',
						nickname: await this.zhou('医疗保健', location)
					},
					{
						src: this.oss + '/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%204%403x.png',
						name: '银行配套',
						nickname: await this.zhou('银行金融:银行', location)
					}
				];
			},
			async zhou(keyword, location) {
				return await new Promise((resolve, reject) => {
					qqmapsdk.search({
						keyword,
						location,
						success: res => {
							let nickname = '';
							let long = res.data.length > 4 ? 5 : res.data.length;
							for (var j = 0; j < long; j++) {
								nickname += (j > 0 ? '、' : '') + res.data[j].title.replace('[公交站]',
									'').replace(/[\(（][^\)）]+[\)）]/, '');
							}
							resolve(nickname);
						}
					});
				});
			},
			click(item) {
				this.activeIndex = item.index;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.coverview {
		position: absolute;
		top: calc(50% - 140rpx);
		left: calc(50% - 290rpx);
	}

	.m-marker-box {
		background-color: #fff;
		padding: 14rpx 26rpx;
		border-radius: 6rpx;
	}

	.w_50 {
		width: 50%;
	}

	.widhei {
		width: 20px;
		height: 17px;
	}

	.borright {
		border-right: 2rpx solid #f1f1f1;
	}

	.daosanjiao {
		width: 0;
		height: 0;
		border-top: 12rpx solid #fff;
		border-left: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
	}

	.boxwid {
		width: 32%;
	}

	.c1 {
		color: #000000;
	}

	.c2 {
		color: #797979;
	}

	.boxfiexd {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.m-c-l-g-b {
		color: #211f20;
	}

	.boxxu {
		border-left: 4rpx dashed #eee;
	}

	.ca0 {
		color: #a0a0a0;
		font-size: 24rpx;
	}

	.c63 {
		color: #636363;
	}

	.c16 {
		color: #daaf7f !important;
		font-size: 20rpx !important;
	}

	.corb {
		color: #fff;
	}

	.boxbgf {
		width: 180rpx;
		height: 45rpx;
		line-height: 43rpx;
		text-align: center;
		border: 1rpx solid #fff;
		color: #fff;
		font-size: 24rpx;
		border-radius: 4rpx;
	}

	.boxlv {
		width: 170rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #0e5642;
		color: #fff;
		font-size: 24rpx;
		border-radius: 60rpx;
	}

	.btu_operation {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.guanjia {
		width: 80px;
		height: 40px;
		font-weight: 600;
		background: #0e5642;
		line-height: 40px;
		text-align: center;
		border-radius: 4px;
		color: #fff;
		margin-left: -30px;
		margin-top: 5px;
	}

	.images-y-s {
		width: 110px;
		height: 90px;
		border: 2px solid black;
		border-style: dotted;
	}

	.images-y-s-p {
		width: 60px;
		height: 30rpx;
		background: #dcdada;
	}

	.n-m-p-z {
		text-align: center;
		font-weight: 600;
		width: 90px;
		color: #fff;
		color: #fff;
		height: 30px;
		line-height: 28px;
		border-radius: 14px;
		background-color: #0e5642;
	}

	.h-f-z {
		background: #ccc6c6;
		height: 16px;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;

			&__image {
				width: 170px;
				height: 170px;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}

			&__text {
				color: black;
				text-align: center;
				font-size: 14px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #0e5642;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: black;
				line-height: 16px;
			}
		}
	}

	.iconfont {
		width: 73rpx;
		height: 39rpx;
		border-color: #000;
		background: #ababab;
		color: #5a5a5a;
		background: beige;
		background: #f7eee4;
		border-color: blanchedalmond;
		text-align: center;
	}

	.mbgf {
		background-color: #0e5642;
	}

	.l-f-y {
		background: #f7eee4;
		height: 75rpx;
	}

	.shu-qi-lai {
		width: 8rpx;
		background: #0e5642;
		height: rpx;
	}

	.u-i-0 {
		background-color: #000;
	}

	.shuxian {
		width: 6rpx;
		height: 40rpx;
		background-color: #0e5642;
		margin-right: 15rpx;
	}

	.shuxian-text {
		font-size: 34rpx;
		font-weight: bold;
		color: #0e5642;
		height: 60rpx;
		line-height: 60rpx;
	}

	.pt-info {
		color: #a0a0a0;
		padding-left: 20rpx;
		border-left: 4rpx solid #eee;
		line-height: 44rpx;
	}

	.m-mg-4w {
		margin-left: 4vw;
		margin-right: 4vw;
	}

	.map-dingwei {
		width: 20px;
		height: 20px;
		// position: absolute;
		// bottom: 5px;
		// left: 5px;
		margin-left: 5px;
		margin-top: 5px;
	}

	.swiperAction-box {
		position: absolute;
		left: 50%;
		bottom: 10px;
		transform: translate(-50%, 0);
		background-color: rgba(255, 255, 255, 0.75);
		height: 60rpx;
		border-radius: 60rpx;
		display: flex;
	}

	.swiperAction {
		width: 108rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 60rpx;
	}

	.sction {
		background-color: #d5b182;
		color: #fff;
	}

	.showTop {
		background-color: #fff;
		left: 0;
		right: 0;
		z-index: 99999;
	}
</style>

<style>
	page{
		font-weight: bold!important;
	}
</style>

